<style scoped>
  .box {
    width: 100px;
    height: 100px;
    background: pink;
  }

  /* 过渡的样式 */
  .hello-enter-active {
    transition: opacity 3s;
  }

  .hello-leave-active {
    transition: opacity .5s;
  }

  /* 隐藏的样式 */
  .hello-enter, .hello-leave-to {
    opacity: 0;
  }
  /* 过渡的样式 */
  .v-enter-active, .v-leave-active {
    transition: all 2s;
  }

  /* 隐藏的样式 */
  .v-enter, .v-leave-to {
    opacity: 0;
    transform: translateX(20px);
  }
</style>


<template>
  <div>
    <h2>App</h2>
    <!-- 
      使用<transition>包含需要有过滤效果的显示隐藏标签 => 在显示隐藏时会给标签添加一些特定类名
      给这个类名, 指定样式
        过渡的样式
        隐藏时的样式
    -->

    <button @click="isShow=!isShow">切换</button>
    <transition name="hello">
      <div v-show="isShow" class="box"></div>
    </transition>

    <button @click="isShow2=!isShow2">切换</button>
    <transition>
      <div v-show="isShow2" class="box"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      isShow: true,
      isShow2: true
    }
  }
}
</script>

